<template>
    <!-- 定义一个包含弹窗的div容器 -->
    <div>
        <!-- el-dialog是Element UI中的对话框组件 -->
        <!-- :title动态绑定对话框的标题，使用组件的title属性值 -->
        <!-- :visible.sync实现与父组件的双向数据绑定，用于控制对话框的显示与隐藏，绑定到组件内部的localDialogVisible属性 -->
        <!-- width设置对话框的宽度为父容器的70% -->
        <el-dialog :title="title" :visible.sync="localDialogVisible" width="70%">
            <!-- 对话框的内容区域 -->
            <span>这是一段信息</span>
            <!-- 使用slot="footer"定义对话框底部区域 -->
            <span slot="footer" class="dialog-footer">
                <!-- 取消按钮，点击时调用closeDialog方法 -->
                <el-button @click="closeDialog">取 消</el-button>
                <!-- 确定按钮，点击时调用confirmDialog方法，按钮类型为主要按钮（primary） -->
                <el-button type="primary" @click="confirmDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    // 定义组件接收的props
    props: {
        // dialogVisible：用于控制弹窗显示或隐藏的布尔值
        // type指定类型为Boolean
        // default设置默认值为false，即弹窗默认不显示
        dialogVisible: {
            type: Boolean,
            default: false
        },
        // title：弹窗的标题
        // type指定类型为String
        // default设置默认值为'添加商品'
        title: {
            type: String,
            default: '添加商品'
        }
    },
    // 组件的数据函数，返回一个包含组件内部状态的对象
    data() {
        return {
            // localDialogVisible：用于在组件内部管理弹窗的显示状态，初始值为props中dialogVisible的值
            localDialogVisible: this.dialogVisible
        };
    },
    // 监听属性变化的watch对象
    watch: {
        // 监听dialogVisible属性的变化
        dialogVisible(newVal) {
            // 当dialogVisible的值发生变化时，更新localDialogVisible的值，保持两者同步
            this.localDialogVisible = newVal;
        }
    },
    // 组件的方法对象
    methods: {
        // 关闭弹窗的方法
        closeDialog() {
            // 通过$emit触发名为update:dialogVisible的自定义事件，并传递false作为参数
            // 用于通知父组件更新dialogVisible的值为false，关闭弹窗
            this.$emit('update:dialogVisible', false);
        },
        // 确认操作的方法
        confirmDialog() {
            // 这里可以添加确认后的业务逻辑，例如保存数据等
            // 目前只是简单地触发update:dialogVisible事件关闭弹窗
            this.$emit('update:dialogVisible', false);
        }
    }
};
</script>

<style lang="less" scoped>
// 此处为组件的样式部分，scoped表示该样式只对当前组件生效，目前没有编写具体样式代码
</style>